<template>
  <tr>
    <td><input type="checkbox" v-model="achecked" /></td>
    <td>{{ name }}</td>
    <td>{{ price }}</td>
    <td>
      <button @click="incFn">-</button>
      {{ num }}
      <button @click="addFn">+</button>
      
    </td>
    <td>{{ price * num }}</td>
    <button @click="fn">删除</button>
  </tr>
</template>

<script>
export default {
  props: ['num', 'price', 'index', 'name', 'checked'],
  data() {
    return {
      //直接监听checked会有错误所以声明一个check来控制checked
      achecked:this.checked,
    }
  },

  methods: {
    fn() {
      this.$emit('del', this.index)
    },
    addFn() {
      this.$emit('add', this.index)
    },
    incFn() {
      if (this.num > 0) {
        this.$emit('inc', this.index)
      }
      return 0
    },
  },
  watch: {
    achecked: {
      deep: true,
      immediate: true,
      handler() {
        this.$emit('change',this.achecked,this.index)
      },
    },
    checked: {
      deep: true,
      immediate: true,
      handler() {
        this.achecked = this.checked
      },
    },
  },
}
</script>

<style></style>
